<template>
	<view>
		<view class="bgc">

		</view>
		<view class="head bor in">
			<view class="image">
				<image class="img1" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
			</view>
			<view class="text">
				<view class="name">
					王阿姨 <text class="age">上海</text>
				</view>
				<view class="num">
					工号:201400
				</view>
			</view>
		</view>
		<!-- 个人简介 -->
		<view class="title in">
			个人简介
		</view>
		<view class="text in">
			专业从事房地产行业数十年，拥有丰富经验，专业从事房地产行业数十年，拥有丰富经验，专业从事房地产行业数十年，拥有丰富经验...
		</view>
		<!-- 人生格言 -->
		<view class="title in">
			人生格言
		</view>
		<view class="text in">
			人生是个圆，有的人走了一辈子也没有走出命运画出的圆圈，其实，圆上的每一个点都有一条腾飞的切线。
		</view>
		<!-- 联系 -->
		<view class="row1 in bor">
			
			<view class="box">
				<!-- 电话 -->
				<view class="cell">
					<image class="img1" src="../../static/zonghe/cell.png" mode=""></image>
					<view class="txt">
						联系电话
					</view>
					<view class="">
						177777777777
					</view>
				</view>
				<!-- 微信 -->
				<view class="wx">
					<image class="img1" src="../../static/zonghe/wx.png" mode=""></image>
					<view class="txt">
						微信
					</view>
					<view class="">
						177777777777
					</view>
				</view>
			</view>
			<view class="footer">
				向ta咨询
			</view>
		</view>
		<!-- 咨询 浮标 -->
		<view class="span">
			向ta咨询
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.bgc {
		border-top: 1rpx solid #d3d3d3;
		width: 100%;
		height: 170rpx;
		background-color: #FFCC00;
	}

	.in {
		width: 90%;
		margin: auto;
	}

	.bor {
		box-shadow: 0px 0px 8rpx 0rpx #e2e2e2;
		border: 1px solid rgba(255, 0, 0, 0);
		border-radius: 15rpx;
		background-color: #fff;
	}

	.head {
		height: 250rpx;
		margin-top: -170rpx;
		display: flex;

		.image {
			margin: auto;
			width: 40%;
			height: 180rpx;
			position: relative;

			.img1 {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.text {
			width: 60%;
			padding: 50rpx 0rpx;

			.name {
				color: rgba(16, 16, 16, 100);
				font-size: 40rpx;
				font-weight: 550;

				.age {
					color: #999999;
					font-size: 28rpx;
					font-weight: normal;
					margin-left: 30rpx;
				}
			}

			.num {
				margin-top: 50rpx;
				color: #999;
				font-size: 32rpx;
			}



		}
	}

	.title {
		margin-top: 30rpx;
		font-weight: 600;
	}

	.text {
		margin-top: 30rpx;
		color: #999;
		line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.row1 {
		border-radius: 15rpx;
		background-color: #fff;
		margin-top: 40rpx;
		.box {
			padding: 10rpx 10rpx;
		}
		.cell {
			display: flex;
		}
		.wx {
			display: flex;
		}

		.img1 {
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
			margin-top: 5rpx;
		}
		.txt{
			width:150rpx;
		}
		.footer{
			width: 100%;
			height: 80rpx;
			background-color: #00AE2C;
			border-radius: 0  0 15rpx 15rpx ;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}
	}
	.span{
		width: 110rpx;
		height: 110rpx;
		line-height:100rpx;
		background-color: rgba(0, 174, 44, 100);
		color: rgba(255, 255, 255, 100);
		font-size:24rpx;
		text-align: center;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		font-family: Arial;
		border-radius: 50%;
		position:  fixed;
		right: 10rpx;
		bottom: 100rpx;
	}
</style>
